<template>
	<div class="convert_chart" ref="taskStat"></div>
</template>

<script>
import * as echarts from 'echarts';
import eleResize from 'element-resize-detector';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		const pageViewColor = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			{ offset: 0, color: 'rgba(27, 178, 32, 1)' },
			{ offset: 1, color: 'rgba(27, 178, 32, 0.4)' }
		]);
		const downloadColor = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
			{ offset: 0, color: 'rgba(15, 108, 228, 1)' },
			{ offset: 1, color: 'rgba(15, 108, 228, 0.4)' }
		]);
		return {
			swchart: null,
			chartOption: {
				title: { text: '时段访问数据', top: 0, left: 15, padding: [8, 0], textStyle: { fontSize: 16, lineHeight: 16 } },
				legend: {
					top: 0,
					left: 120,
					padding: 8,
					icon: 'rect',
					itemHeight: 4,
					itemWidth: 40,
					data: [
						{ name: '访问量', itemStyle: { color: pageViewColor } },
						{ name: '下载量', itemStyle: { color: downloadColor } }
					]
				},
				grid: { top: 48, left: 16, right: 16, bottom: 16, containLabel: true },
				xAxis: {
					type: 'category',
					splitLine: { show: true, lineStyle: { color: '#E6EBF0' } },
					axisLabel: { color: '#8D9094' },
					axisTick: false,
					axisLine: { lineStyle: { color: '#E6EBF0' } },
					boundaryGap: false,
					data: []
				},
				yAxis: {
					type: 'value',
					splitLine: { lineStyle: { type: 'dotted', color: '#E6EBF0' } },
					axisLabel: { color: '#8D9094' },
					axisLine: { lineStyle: { type: 'dotted', color: '#E6EBF0' } }
				},
				series: [
					{
						name: '访问量',
						type: 'line',
						smooth: true,
						showSymbol: false,
						itemStyle: { normal: { lineStyle: { type: 'solid', color: pageViewColor } } },
						areaStyle: { opacity: 0.1, color: pageViewColor },
						data: [120, 132, 101, 134, 90, 230, 210]
					},
					{
						name: '下载量',
						type: 'line',
						smooth: true,
						showSymbol: false,
						itemStyle: { normal: { lineStyle: { type: 'solid', color: downloadColor } } },
						areaStyle: { opacity: 0.1, color: downloadColor },
						data: [220, 182, 191, 234, 290, 330, 310]
					}
				]
			}
		};
	},
	watch: {
		data: {
			handler(data) {
				this.formatChartsData(data);
				this.$nextTick(() => {
					this.swchart.setOption(this.chartOption, true);
				});
			},
			deep: true
		}
	},
	mounted() {
		this.initializeEcharts();
	},
	methods: {
		//初始化图表
		initializeEcharts() {
			this.swchart = echarts.init(this.$refs.taskStat);
			eleResize().listenTo(this.$refs.taskStat, (ele) => {
				this.$nextTick(() => {
					this.swchart.resize();
				});
			});
		},

		//格式化图表数据
		formatChartsData(data) {
			this.chartOption.xAxis.data = data.xdata;
			this.chartOption.series[0].data = data.ybData;
			this.chartOption.series[1].data = data.ydData;
		}
	}
};
</script>

<style lang="scss" scoped>
.convert_chart {
	height: 100%;
}
</style>
